<template>
	<view class='index'>
		<head-navigation :isStyle="2" background-color="#F5F8FE">
			<view slot="content" class="head_box">
				<view class="head_icon">
					<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/a2607903f94940a9969740b3f3d00b52.png"
						mode="widthFix"></image>
				</view>
				<text class="head_text">神椰积分</text>
				<view class="head_search" @click="searchJump">
					<image
						src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/0a804460dbaa4e059f342ca9c7b7ed95.png"
						mode=""></image>
					<text>输入关键词搜索</text>
				</view>
			</view>
		</head-navigation>
		<view class="index_head">
			<view class="logo_but" v-if="!isToken" @click="jumpLogin">
				<text>登录</text>
				<uni-icons type="right" size="14" color="#E81C00"></uni-icons>
			</view>
			<view class="index_head_title">积分总计</view>
			<view class="index_head_integral">
				<text class="head_integral">{{integralInfo.totalIntegral?integralInfo.totalIntegral:0}}</text>
				<text class="head_word">积分等值金额：{{integralInfo.totalValue?integralInfo.totalValue:0}}元</text>
			</view>
			<view class="index_head_info">
				<view class="info_item" @click="jumpIntegral(2)">
					<view class="info_item_head">
						<text>椰分</text>
						<image
							src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/993976b5b2e34509900c20eab16d48dc.png"
							mode=""></image>
					</view>
					<view class="info_item_num">{{integralInfo.tpoint?integralInfo.tpoint:0}}</view>
				</view>
				<view class="info_item" @click="jumpIntegral(1)">
					<view class="info_item_head">
						<text>COCO</text>
						<image
							src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/993976b5b2e34509900c20eab16d48dc.png"
							mode=""></image>
					</view>
					<view class="info_item_num">{{integralInfo.coCo?integralInfo.coCo:0}}</view>
				</view>
				<view class="info_item info_item_last">
					<view class="info_item_head">
						<text>其他可用积分</text>
					</view>
					<view class="info_item_num">{{integralInfo.anchorMemberAmount?integralInfo.anchorMemberAmount:0}}
					</view>
				</view>
			</view>
			<view class="info_item_w"></view>
		</view>
		<view class="notice" v-if="noticeVO.showType === '0' && isShowType">
			<text class="notice_word">公告</text>
			<text class="notice_line"></text>
			<view class="notice_content" v-if="isShowTypeContent">
				<marquee class="title_word" :marqueeText="noticeVO.notice"></marquee>
			</view>
		</view>
		<view class="index_head_nav">
			<view class="head_nav_item" v-for="(item,index) in navList" :key="index" @click="jumpNav(item)">
				<image class="nav_item_image" :src="item.image" mode=""></image>
				<view class="nav_item_word">{{item.name}}</view>
			</view>
		</view>
		<view class="consumption consumption_one"  v-if="navigationDTO.showType === '0'">
			<view class="consumption_title">
				<text class="consumption_title_one">消费获积分</text>
				<text class="consumption_title_two">全网下单优惠多，笔笔消费送积分</text>
			</view>
			<view class="consumption_list">
				<block v-for="(item,index) in navigationDTO.navigationList.slice(0,4)" :key="index">
					<view class="consumption_list_item" @click="jumpConsumption(item)" v-if="item.iconUrl != ''">
						<image class="nav_item_image" :src="item.iconUrl"></image>
						<view class="list_item_word ellipseHide">{{item.title}}</view>
					</view>
				</block>
				<view class="consumption_list_item" @click="jumpPointsInquiry">
					<image class="nav_item_image" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/dd1303a587ce4c53a87d7bf148054ce8.png"></image>
					<view class="list_item_word">更多</view>
				</view>
			</view>
		</view>
		<view class="consumption consumption_two" v-if="exchangeVOS && exchangeVOS.length > 0 ">
			<view class="consumption_title">
				<text class="consumption_title_one">通兑积分</text>
				<view class="consumption_title_two">
					<view class="title_two_img" v-for="(item,index) in exchangeVOS" :key="index">
						<image :src="item.iconUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="consumption_list_banner">
				<swiper class="list_banner_item" :indicator-dots="true" :autoplay="true" circular indicator-color="#FFFFFF"
					indicator-active-color="#FFFFFF" :interval="3000" :duration="1000" :current="current" @change="changeSwiper">
					<swiper-item v-for="(item,index) in exchangeVOS" :key="index"  @click="jumpExchangeVOS(item)">
						<image class="nav_item_image" :src="item.bannerUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="popular_redemption">
			<view class="title_box">
				<image src="/static/index/title_icon.png"></image>
				<text>热门兑换推荐</text>
				<image src="/static/index/title_icon.png"></image>
			</view>
			<view class="popular_redemption_list">
				<view class="popular_redemption_item" v-for="(item,index) in dataList" :key="index"
					@click="jumpDetails(item)">
					<view class="r_item_img">
						<image :src="item.img" mode="aspectFill"></image>
						<!-- <view class="r_item_img_no" tt:if="{{item.inventoryStatus == 2}}">已兑完</view> -->
					</view>
					<view class="r_item_word_box">
						<view class="r_item_word ellipseHide_two">{{item.name}}</view>
						<view class="r_item_price">
							<view class="price_num" v-if="item.payType == 1">
								<text class="price_num_02">{{item.price}} {{item.priceTypeDict}}</text>
							</view>
							<view class="price_num" v-else-if="item.payType == 2">
								<text class="price_num_01">￥</text>
								<text class="price_num_02">{{item.cash}}</text>
							</view>
							<view class="price_num" v-else-if="item.payType == 3">
								<text class="price_num_01">￥</text>
								<text class="price_num_02">{{item.cash}}</text>
								<text class="price_num_03">+{{item.price}} {{item.priceTypeDict}}</text>
							</view>
							<view class="price_but" v-if="item.surplusStock == 0">已兑完</view>
							<view class="price_but" v-else>去兑换</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no_info" v-if="dataList.length == 0">
				<image
					src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/f298bc3bad2c465ba94335ab9ee81cec.png"
					mode="widthFix"></image>
				<text>暂无可兑换产品哦~</text>
			</view>
		</view>
		<uni-popup ref="popupLogin" type="dialog" mask-background-color="rgba(0,0,0,0.8)">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'该功能需要登录进行查看'"
				:before-close="true" @close="loginClose" @confirm="loginConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		pointsWalletHomePageConfig,
		mineGetIntegral,
		jtkOrdersPubid,
	} from '@/api/newIndex.js'
	import {
		getCommodityList
	} from '@/api/api-v1-2.js'
	import { getPath } from "@/common/gatherTwitterData.js"
	const app = getApp()
	export default {
		data() {
			return {
				navList: [{
						id: 1,
						image: 'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/b98fe8ef8c2f449bbcf1e9bd1bd62548.png',
						name: '玩转积分',
						url: '/pages/subPackages/pagesB/shenyeCoin/integralRule/integralRule?type=3',
						type: 1
					},
					{
						id: 2,
						image: 'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/fc74635b4e3f494aa598b52e2ba54941.png',
						name: '兑吧',
						url: '/pages/subPackages/pagesB/shenyeMarket/shenyeMarket',
						type: 2
					},
					{
						id: 3,
						image: 'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/442235328cee4b79992386e71adcde37.png',
						name: '积分查询',
						url: '/pages/subPackages/pagesA/pointsInquiry/pointsInquiry',
						type: 3
					},
					{
						id: 4,
						image: 'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/15c40d041df741aa80df224488cfc858.png',
						name: '订单兑换积分',
						url: '/pages/subPackages/pagesA/orderExchange/orderExchange',
						type: 4
					},
				],
				exchangeVOS: [], //积分通兑配置
				navigationDTO: {}, //消费获积分配置
				noticeVO: {}, //公告配置信息
				searchVO: {}, //搜索设置
				info: {}, //首页信息
				integralInfo: {}, //积分首页
				listTotal: 0, //总数
				pageSize: 5, //每页记录数
				pageNum: 1, //当前页码
				dataList: [],
				isShowType: false, //是否显示公告
				isShowTypeContent: false,
				isToken: false, // 判断是否登录
				userId: '', //用户id
				pubid: '', //聚推客推广id
				current:0,
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
			this.getPointsWalletHomePageConfig() // 获取积分钱包首页配置信息
			this.initialization() //热门兑换推荐
			if (this.isToken) {
				this.getMineGetIntegral() // 获取积分信息
				this.getCustomer()
				this.getJtkOrdersPubid()
			}
		},
		methods: {
			changeSwiper(e) {
				let current = e.detail.current
				let source = e.detail.source
				if (source == 'autoplay' || source == 'touch') {
					// 根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。
					// touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.current = current
					// console.log('current', current)
				}
			},
			// 跳转消费获积分组件
			jumpConsumption(item){
				if (!this.isToken) {
					this.$refs.popupLogin.open()
					return
				}
				var url = ''
				if(item.skipType == 2){
					url = item.linkUrl
				}else{
					url = getPath(item,this.pubid,this.userId)
				}
				console.log('item',item)
				uni.navigateTo({
					url
				})
			},
			// 更多
			jumpPointsInquiry(){
				if (!this.isToken) {
					this.$refs.popupLogin.open()
					return
				}
				uni.navigateTo({
					url:`/pages/subPackages/pagesF/gatherTwitterUsers/gatherTwitterUsers?pubid=${this.pubid}&userId=${this.userId}`
				})
			},
			// 跳转通兑积分
			jumpExchangeVOS(item){
				if (!this.isToken) {
					this.$refs.popupLogin.open()
					return
				}
				uni.navigateTo({
					url:item.skipUrl
				})
			},
			// 获取聚推客 id
			async getJtkOrdersPubid() {
				var res = await jtkOrdersPubid()
				this.pubid = res.result.pubid
			},
			// 获取用户信息
			async getCustomer() {
				var res = await this.$api.getCustomer()
				this.userId = res.data.id
			},
			// 确认登录
			loginConfirm() {
				// var url = '/pages/index/shenye-paradise/paradise-details/paradise-details?id=' + this.id
				app.jumpPublicLogin()
			},
			// 关闭登录
			loginClose() {
				this.$refs.popupLogin.close()
			},
			// 首页搜索跳转
			// 1 电影票服务  2 大牌点餐 3 大牌送餐4 景区门票5 住宿预订 6 外卖黄食团
			searchJump() {
				var url = '/pages/subPackages/pagesA/searchPage/searchPage'
				uni.navigateTo({
					url
				})

			},
			// 消费获积分
			consumptionEarnsPoints() {
				//  switch (this.searchVO.pluginId){
				//  	case '1':
				//     url = `plugin-private://wx89752980e795bfde/pages/index/index?pub_id=${this.pubid}&sid=${this.userId}`
				//  		break;
				// case '1':
				//     url = `plugin-private://wx89752980e795bfde/pages/index/index?pub_id=${this.pubid}&sid=${this.userId}`
				//     break;
				//  	default:
				//  		break;
				//  }
			},
			// 跳转登录验证
			jumpLogin() {
				app.jumpPublicLogin()
			},
			// 跳转积分攻略
			jumpIntegral(type) {
				uni.navigateTo({
					url: `/pages/subPackages/pagesB/shenyeCoin/integralRule/integralRule?type=${type}`
				})
			},
			// 跳转积分集市详情
			jumpDetails(el) {
				uni.navigateTo({
					url: '/pages/subPackages/pagesB/shenyeMarket/commodityDetails/commodityDetails?id=' + el.id
				})
			},
			// 判定当前时间是否 在公告范围内
			isCurrentDateWithinTimeRange(startTime, endTime) {
				const currentDate = new Date();
				const startDate = new Date(startTime);
				const endDate = new Date(endTime);
				return currentDate >= startDate && currentDate <= endDate;
			},
			// 获取积分钱包首页配置信息
			async getPointsWalletHomePageConfig() {
				this.isShowTypeContent = false
				let res = await pointsWalletHomePageConfig()
				this.info = res.result
				this.exchangeVOS = this.info.exchangeVOS //积分通兑配置
				this.navigationDTO = this.info.navigationDTO //消费获积分配置
				this.noticeVO = this.info.noticeVO //公告配置信息
				this.isShowType = false
				if (this.noticeVO.showType === '0') {
					this.isShowType = this.isCurrentDateWithinTimeRange(this.noticeVO.beginTime, this.noticeVO.endTime)
					// console.log('this.isShowType',this.isShowType)
					// this.isShowType = true
				}
				this.isShowTypeContent = true
				this.searchVO = this.info.searchVO //搜索设置
			},
			// 获取积分信息
			async getMineGetIntegral() {
				let res = await mineGetIntegral()
				this.integralInfo = res.result
			},
			// nav 跳转
			jumpNav(item) {
				if((item.id == 3 || item.id == 4) && !this.isToken){
					this.$refs.popupLogin.open()
					return
				}else{
					uni.navigateTo({
						url: item.url
					})
				}

			},
			initialization() {
				this.listTotal = 0
				this.pageNum = 1
				this.dataList = []
				this.getDataList()
			},
			async getDataList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				try {
					const res = await getCommodityList(data);
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.list.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					// uni.hideLoading()
				} finally {

				}
			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {

			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	.index {
		width: 100%;
		min-height: 100vh;
		background: #F5F8FE;
	}

	/* 头部 */
	.head_box {
		display: flex;
		flex-direction: row;
		padding-left: 30rpx;
	}

	.head_icon {
		width: 48rpx;
		height: 44rpx;
	}

	.head_icon image {
		width: 100%;
		height: 100%;
	}

	.head_text {
		font-size: 34rpx;
		color: #2C2A2F;
		font-weight: bold;
		margin-left: 12rpx;
	}

	.head_search {
		width: 226rpx;
		height: 52rpx;
		color: #666666;
		font-size: 20rpx;
		border-radius: 32rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-left: 20rpx;
	}

	.head_search image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	/* end */

	/* 积分总计 */
	.index_head {
		width: 690rpx;
		min-height: 308rpx;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/fd00ccbb20e0424ca73af2d20ffe6746.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		margin: 0 auto;
		position: relative;
		/* 		 margin-top: -10rpx;
		 position: relative;
		 z-index: 13; */
	}
	.info_item_w{
		width: 100%;
		background: #ffffff;
		height: 42rpx;
		margin-top: -20rpx;
		border-radius: 0 0 16rpx 16rpx;
	}
	.logo_but {
		position: absolute;
		width: fit-content;
		background: #FFFAFA;
		top: 38rpx;
		right: 30rpx;
		color: #E81C00;
		font-size: 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 4rpx 6rpx 4rpx 14rpx;
		border-radius: 40rpx;
		box-shadow: 0rpx 0rpx 4rpx 0rpx #C26D60;
	}

	.index_head_title {
		padding-top: 34rpx;
		padding-left: 30rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}

	.index_head_integral {
		margin-top: 12rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: baseline;
		
	}

	.head_integral {
		font-weight: bold;
		font-size: 52rpx;
		color: #F44308;
	}

	.head_word {
		margin-left: 16rpx;
		font-size: 20rpx;
		color: #333333;
		/* line-height: 45rpx; */
		/* padding-bottom: 7rpx; */
	}

	.index_head_info {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 50rpx;
		box-sizing: border-box;
		width: 630rpx;
		height: 134rpx;
		border-radius: 16rpx;
		background: #FFFAFA;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
		z-index: 2;
	}

	.info_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.info_item_head {
		display: flex;
		align-items: center;
		width: fit-content;
		height: 28rpx;
		padding: 0 14rpx;
		color: #ffffff;
		font-size: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
		background: linear-gradient(167.53deg, #FFA26F 6.48%, #FF5C2C 108.12%);
	}

	.info_item_head image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 4rpx;
	}
	
	.info_item_last .info_item_head {
		background: transparent;
		color: #666666;
	}
	.info_item_num{
		font-size: 40rpx;
		font-weight: bold;
	}
	/* 公告 */
	.notice {
		width: 690rpx;
		padding: 4rpx 30rpx;
		background: #ffffff;
		border-radius: 40rpx;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx auto;
		box-sizing: border-box;
	}

	.notice_word {
		font-weight: bold;
		color: #222222;
	}

	.notice_line {
		height: 20rpx;
		border-right: 2rpx solid #222222;
		margin-left: 8rpx;
		margin-right: 16rpx;
	}

	.notice_content {
		flex: 1;
		width: 0;
	}

	/* end */
	.index_head_nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		margin: 30rpx 0;
	}

	.head_nav_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.head_nav_item .nav_item_image{
		width: 100rpx;
		height: 100rpx;
	}

	.nav_item_word {
		font-size: 28rpx;
		color: #333333;
	}

	/* end */

	/* 消费获积分 */
	.consumption {
		width: 690rpx;
		/* height: 242rpx; */
		padding: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
	}
	.consumption_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.consumption_title_one {
		font-size: 32rpx;
		color: #222222;
		font-weight: bold;
	}

	.consumption_title_two {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
	}
	.consumption_list {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.consumption_list_item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* margin-right: 76rpx; */
	}

	.consumption_list_item:last-child {
		margin-right: unset;
	}

	.consumption_list_item .nav_item_image {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}
	.list_item_word {
		width: 90%;
		text-align: center;
		height: 32rpx;
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #2C2A2F;
	}
	.title_two_img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.title_two_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.title_two_img:last-child image {
		margin-right: 0;
	}

	.list_banner_item {
		width: 100%;
		height: 152rpx;
	}

	.consumption_list_banner {
		margin-top: 16rpx;
	}

	.consumption_list_banner .nav_item_image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.consumption_list_banner /deep/ .uni-swiper-dots-horizontal,
	.consumption_list_banner /deep/ .wx-swiper-dots-horizontal {
		bottom: 10rpx;
	}

	.consumption_list_banner /deep/ .uni-swiper-dot,
	.consumption_list_banner /deep/ .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		margin-right: 6rpx;
	}

	.consumption_list_banner /deep/ .uni-swiper-dot-active,
	.consumption_list_banner /deep/ .wx-swiper-dot-active {
		width: 42rpx;
		height: 8rpx;
		border-radius: 20rpx;
	}
	.consumption_one{
		padding: 30rpx 0;
		margin-bottom: 30rpx;
	}
	.consumption_one .consumption_title{
		padding: 0 30rpx;
	}

	/* end */

	/* 热门兑换 */
	.no_info {
		padding-top: 20rpx;
	}

	.title_box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		color: #222222;
		font-weight: bold;
		margin: 30rpx 0;
	}

	.title_box image {
		width: 34rpx;
		height: 28rpx;
	}

	.title_box text {
		margin: 0 24rpx;
	}

	.popular_redemption {
		/* background: #F5F8FE; */
		padding-bottom: 100rpx;
	}

	.popular_redemption_title {
		padding: 50rpx 120rpx 40rpx 120rpx;
		font-size: 34rpx;
		color: #666666;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.popular_redemption_title_item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title_line {
		width: 62rpx;
		height: 8rpx;
		border-radius: 20rpx;
		margin-top: 8rpx;
	}

	.titleItemOn {
		color: #222222;
		font-weight: bold;
	}

	.titleItemOn .title_line {
		background: #FF2521;
	}

	.popular_redemption_list {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.popular_redemption_item {
		width: 330rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding: 20rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.r_item_img {
		width: 100%;
		height: 262rpx;
		position: relative;
	}

	.r_item_img_no {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 142rpx;
		height: 142rpx;
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		line-height: 142rpx;
		background: rgba(0, 0, 0, .5);
		font-size: 32rpx;
	}

	.r_item_img image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.r_item_word_box {
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.r_item_word {
		font-size: 30rpx;
		width: 100%;
		max-height: 80rpx;
		padding: 0 8rpx;
		margin-top: 20rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
	}

	.r_item_price {
		width: 100%;
		padding: 0 8rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.price_num {
		font-size: 32rpx;
		color: #FF1919;
		margin-bottom: 24rpx;
	}

	.price_num_01 {
		font-size: 22rpx;
		font-weight: bold;
	}

	.price_num_02 {
		font-size: 36rpx;
		font-weight: bold;
	}

	.price_num_03 {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.price_but {
		width: 262rpx;
		height: 60rpx;
		font-size: 26rpx;
		color: #FF2521;
		margin: 0 auto;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		background: #FFF3F3;
	}

	.price_but_no {
		background: #D2D2D2;
		color: #ffffff;
	}

	/* end */
</style>